<template>
  <div class="card-rate" v-if="rate">
    <span style="margin-right: 24px"
      >同比<span>
        <span class="icon-arrow">
          <icon-arrow-up v-if="rate.tb > 0" />
          <icon-arrow-down v-if="rate.tb < 0" />
        </span>
        <span class="rate-value">
          <span v-if="rate.tb">{{ Math.abs(rate.tb) }}%</span>
          <span v-else>0%</span>
        </span>
      </span></span
    >
    <span style="white-space: nowrap"
      >环比<span>
        <span class="icon-arrow">
          <icon-arrow-up v-if="rate.hb > 0" />
          <icon-arrow-down v-if="rate.hb < 0" />
        </span>
        <span class="rate-value">
          <span v-if="rate.hb">{{ Math.abs(rate.hb) }}%</span>
          <span v-else>0%</span>
        </span>
      </span>
    </span>
  </div>
</template>
<script setup>
  defineProps({
    // 同比环比 tb | hb
    rate: {
      type: Object,
    },
  })
</script>

<style lang="less" scoped>
  .card-rate {
    font-size: 16px;
    color: #ffffff;
    line-height: 22px;
  }
</style>
